<template>
	<page-body> 
		<view class="page">
			<!---flex布局flex布局开始-->
			<view class="flex  flex-wrap align-center benben-flex-layout loginPage_flex_0_higd"
				:class="uniPlatform=='web'?'loginPage_flex_0_higds':''">
				<!-- <image class='loginPage_fd0_0_higd'  mode="aspectFit"  :src='STATIC_URL+"15.png"'></image>
 -->
				<!-- <text class='self-start loginPage_fd0_1_higd'>{{uniPlatform}}{{$t('欢迎登录')}}18{{ymtype}}</text> -->
				<text class='self-start loginPage_fd0_1_higd'>{{$t('欢迎登录')}}</text>
				<!-- <view class="types flex flex-wrap align-center" @click="checkgroup">
					<image :src='STATIC_URL+"245.png"' mode=""></image>
					<text>{{groupname}}</text>
					<image :src='STATIC_URL+"246.png"' mode=""></image>
				</view> -->
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction align-stretch benben-flex-layout loginPage_flex_1_higd">
				<view class='flex flex-wrap align-center loginPage_fd1_0_higd'>
					<image class='loginPage_fd1_0_c0_higd' mode="aspectFit" :src='STATIC_URL+"64.png"'></image>
					<benben-input class='flex-sub loginPage_fd1_0_c1_higd' type="text" :placeholder="placeholder"
						confirm-type="done"  placeholder-style="color:#999;font-size:32rpx"
						v-model="account" />
				</view>
				<view class='flex flex-wrap align-center loginPage_fd1_1_higd'>
					<image class='loginPage_fd1_0_c0_higd' mode="aspectFit" :src='STATIC_URL+"65.png"'></image>
					<benben-flex-password-diy v-model="password"
						class-name="flex align-center flex loginPage_fd1_1_c1_higd" adjust-position="false"
						:placeholder="$t('请输入密码(6~12位字母+数字)')" :maxlength="12" :default-type='true'
						placeholder-style="color:#999;font-size:32rpx">
						<template #show>
							<text class='fu-iconfont2  loginPage_fd1_1_c1_icon1_higd' data-type="show">&#xE837;</text>
						</template>
						<template #hide>
							<text class='fu-iconfont2  loginPage_fd1_1_c1_icon1_higd' data-type="hide">&#xEBCC;</text>
						</template>
					</benben-flex-password-diy>
				</view>
				<button class='loginPage_fd1_3_higd' @tap.stop="logionFunc()">{{$t('登录')}}</button>


				<image @click="checkgroup" v-if="group==2" class='loginPage_fd1_6_higd' mode="aspectFit"
					:src='STATIC_URL+"js.png"'></image>
				<image @click="checkgroup" v-if="group==1" class='loginPage_fd1_6_higd' mode="aspectFit"
					:src='STATIC_URL+"xs.png"'></image>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局3flex布局开始-->
			<view class="flex flex-direction align-stretch benben-flex-layout loginPage_flex_2_higd">
				<view class='flex align-stretch justify-center'>
					<text class='loginPage_fd2_0_c0_higd'>{{$t('登录提示')}}</text>
				</view>
				<!--  -->
				<view class='flex flex-wrap align-center loginPage_fd2_1_higd' v-html="login_info">
					<!-- 	<text
						class='loginPage_fd2_1_c0_higd'>{{$t('1.登录账号为教职工号2.初次登录请使用默认密码，如需要请在“我的-账号与安全-修改密码”中修改3.如遇其他登录问题请联系管理员')}}</text> -->
				</view>
			</view>

			<!---flex布局3flex布局结束-->
			<view class='flex flex-wrap align-center justify-center loginPage_fd1_5_higd'>
				<benben-flex-switch-new class-name='flex flex' v-model="id_tk" :disabled='false'>
					<template v-slot:checked>

						<view class='flex flex position-relative align-center'>
							<image class='loginPage_checkfd1_5_c0_c0_c0_higd' mode="aspectFit"
								:src='STATIC_URL+"91.png"'></image>
						</view>

					</template>
					<template v-slot:unchecked>

						<view class='flex flex position-relative justify-end align-center'>
							<image class='loginPage_noCheckfd1_5_c0_c1_c0_higd' mode="aspectFit"
								:src='STATIC_URL+"66.png"'></image>
						</view>

					</template>
				</benben-flex-switch-new>
				<text class='loginPage_fd1_5_c1_higd'>{{$t('已阅读并同意')}}</text>
				<text class='loginPage_fd1_5_c2_higd' @tap.stop="handleJumpDiy" data-type="navigateTo"
					data-url="/pages/dlzc/xieyi/xieyi">《用户协议》</text>
				<text class='loginPage_fd1_5_c3_higd'>{{$t('与')}}</text>
				<text class='loginPage_fd1_5_c2_higd' @tap.stop="handleJumpDiy" data-type="navigateTo"
					data-url="/pages/dlzc/privacyPolicy/privacyPolicy">{{$t('《隐私政策》')}}</text>
			</view>


		</view>
	</page-body>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import CryptoJS from 'crypto-js';
	import { host } from '@/common/config.js';

	function md5Encrypt(message) {
		return CryptoJS.MD5(message).toString();
	}
	export default {
		components: {},


		data() {
			return {
				uniPlatform: '',
				ymtype: '',
				groupname: '学生',
				group: 2, //角色类型1学生2老师
				"account": "",
				"password": "",
				/** userinfo【用户信息】
				 *   phone【手机号，不带*号】
				 *   client_id【推送标识】
				 *   birthday【生日】
				 *   mobile【手机号，带*号】
				 *   gender【性别】
				 *   email【邮箱】
				 *   nickname【昵称】
				 *   real_name【真实姓名】
				 *   avatar【头像】
				 *   id【用户ID】
				 *   user_token【用户标识】 **/
				"dataList": {
					"userinfo": {
						"user_token": "",
						"id": "",
						"avatar": "",
						"real_name": "",
						"nickname": "",
						"email": "",
						"gender": "",
						"mobile": "",
						"birthday": "",
						"client_id": "",
						"phone": ""
					}
				},
				"id_tk": false,
				encryptedMessage: '',
				islogin: false,
				logo: '',
				login_info: '',
				placeholder: '',
				tsy: {}
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			// this.account='3197'
			// this.password='123456a'
			this.md5Func()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.placeholder = this.group == 1 ? '请输入学生学号' : '请输入教职工号'
			this.getinfo()
			this.uniPlatform = uni.getSystemInfoSync().uniPlatform;
			// #ifdef H5
			this.ymtype = 'h5'
			// #endif
			// #ifdef MP-WEIXIN
			this.ymtype = 'wx'
			// #endif
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			checkgroup() {
				this.group = this.group == 1 ? 2 : 1
				this.groupname = this.group == 1 ? '学生' : '教师'
				this.placeholder = this.group == 1 ? '请输入学生学号' : '请输入教职工号'
				this.login_info = this.group == 1 ? this.tsy.student_login_info : this.tsy.login_info
				this.$message.info('切换成功')
				// if(this.group==1){
				// 	this.account='3197'
				// 	this.password='123456a'
				// }else{
				// 	this.account='ZB0001'
				// 	this.password='123456a'
				// }
			},
			async getinfo() {

				let datadataList = await this.$api.post(global.apiUrls.post6853b14506caa, {});

				let infodataList = datadataList.data.data;
				if (infodataList) {
					console.log(infodataList)
					this.tsy = infodataList
					this.login_info = this.group == 1 ? this.tsy.student_login_info : this.tsy.login_info
					this.logo = infodataList.logo
				}
			},
			//学生登录
			async onlogonFunc() {
				if (this.islogin) {
					return
				}
				if (!validate(this.account, 'require')) {
					this.$message.info(this.placeholder);
					return false;
				}
				if (!validate(this.password, 'require')) {
					this.$message.info(global.i18n.t('请输入密码'));
					return false;
				}
				if (!validate(this.password, 'password')) {
					this.$message.info(global.i18n.t('请输入正确的密码'));
					return false;
				}
				if (this.id_tk == false) {
					let _this = this
					uni.showModal({
						title: '提示',
						content: '您还未勾选协议,是否勾选?',
						confirmText: '是',
						cancelText: '否',
						confirmColor: '#d32a29',
						success: function(res) {
							if (res.confirm) {
								_this.id_tk = true;
								_this.onlogonFunc()
							} else if (res.cancel) {}
						}
					});
					return
				}
				//请求方法
				//数据验证
				this.islogin = true
				uni.showLoading({
					title: '登录中'
				})
				let datadataList = await this.$api.post(global.apiUrls.post5c78dbfd977cf, {
					account: this.account,
					account_type: 'account',
					password: this.password
				});
				uni.hideLoading()
				if (datadataList.data.code != 1) {
					this.islogin = false
					this.$message.info(datadataList.data.msg);
					return
				}
				let infodataList = datadataList.data;
				this.dataList = infodataList.data
				console.log('学生登录')
				console.log(this.dataList.userinfo)
				uni.setStorageSync('USER_ROLES', '');
				uni.setStorageSync('USER_GROUP', this.group);
				uni.setStorageSync('USER_INFO_7863', this.dataList.userinfo)
				uni.setStorageSync('USER_TOKEN_7863', this.dataList.userinfo.user_token)
				global.istest = 0
				global.token = this.dataList.userinfo.user_token
				uni.switchTab({
					url: '/pages/tabBar/home/home'
				})
				this.$store.commit('saveToken', this.dataList.userinfo.user_token)
				this.$store.commit('updateUserInfo', this.dataList.userinfo)

				// this.$urouter.switchTab(`/pages/tabBar/home/home`);
			},
			//教师登录
			async logionFunc() {
				uni.setStorageSync('USER_ROLES', '');
				if (this.group == 1) {
					this.onlogonFunc()
					return
				}
				if (this.islogin) {
					return
				}

				if (!validate(this.account, 'require')) {
					this.$message.info(this.placeholder);
					return false;
				}
				if (!validate(this.password, 'require')) {
					this.$message.info(global.i18n.t('请输入密码'));
					return false;
				}
				if (!validate(this.password, 'password')) {
					this.$message.info(global.i18n.t('请输入正确的密码'));
					return false;
				}
				if (this.id_tk == false) {
					let _this = this
					uni.showModal({
						title: '提示',
						content: '您还未勾选协议,是否勾选?',
						confirmText: '是',
						cancelText: '否',
						confirmColor: '#d32a29',
						success: function(res) {
							if (res.confirm) {
								_this.id_tk = true;
								_this.logionFunc()
							} else if (res.cancel) {}
						}
					});
					return
				}
				//请求方法
				//数据验证
				this.encryptedMessage = md5Encrypt(this.password); // 要加密的信息
				// 输出加密后的结果
				console.log('password')
				this.islogin = true
				uni.showLoading({
					title: '登录中'
				})
				let url=host+'/api/v1/5c78dbfd977cf'
				let datadataList = await this.$api.post(url, {
					mobile: this.account,
					member_id: '4037',
					account_type: 'mobile',
					password: this.encryptedMessage
				});
				uni.hideLoading()
				if (datadataList.data.code != 1) {
					this.islogin = false
					this.$message.info(datadataList.data.msg);
					return
				}
				let infodataList = datadataList.data;
				this.dataList = infodataList.data
				global.token = this.dataList.userinfo.user_token
				global.istest = 0
				uni.setStorageSync('USER_GROUP', this.group);
				uni.setStorageSync('USER_GROUP', this.group);
				uni.setStorageSync('USER_ROLES', this.dataList.userinfo.roles);
				uni.setStorageSync('USER_INFO_7863', this.dataList.userinfo)
				uni.setStorageSync('USER_TOKEN_7863', this.dataList.userinfo.user_token)
				this.$store.commit('saveToken', this.dataList.userinfo.user_token)
				this.$store.commit('updateUserInfo', this.dataList.userinfo)
				uni.switchTab({
					url: '/pages/tabBar/home/home'
				})
			},
			//引入md5
			md5Func() {
				console.log(9999)
				return
				var s = document.createElement("script");
				console.log(s)
				s.src = "https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js";
				document.head.appendChild(s);
				s.addEventListener("load", function() {
					// 等待s的load事件加载完响应，防止未加载完就调用出错
					console.log(md5);
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: url(image-path('89.png')) no-repeat;
		background-size: 100% auto;

		.loginPage_flex_2_higd {
			margin: 56rpx 0rpx 0rpx 0rpx;
			padding: 0rpx 64rpx 0rpx 64rpx;

			.loginPage_fd2_0_c0_higd {
				color: #999999;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 37rpx;
				text-align: left;
				font-style: normal;
			}

			.loginPage_fd2_1_higd {
				padding: 0rpx 0rpx 0rpx 0rpx;
				margin: 40rpx 0rpx 0rpx 0rpx;

				.loginPage_fd2_1_c0_higd {
					color: #999999;
					font-size: 26rpx;
					font-weight: 400;
					line-height: 46rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}

		.loginPage_fd1_5_higd {
			margin-top: 100rpx;
			// position: absolute;
			// bottom: calc(48rpx + var(--window-bottom));
			// left: 0rpx;
			width: 750rpx;

			.loginPage_checkfd1_5_c0_c0_c0_higd {
				width: 24rpx;
				height: 24rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}

			.loginPage_noCheckfd1_5_c0_c1_c0_higd {
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				width: 24rpx;
				height: 24rpx;
			}

			.loginPage_fd1_5_c1_higd {
				color: var(--benbenFontColor2);
				font-size: 28rpx;
				font-weight: 400;
				line-height: 33rpx;
				margin: 0rpx 0rpx 0rpx 16rpx;
			}

			.loginPage_fd1_5_c3_higd {
				color: var(--benbenFontColor2);
				font-size: 28rpx;
				font-weight: 400;
				line-height: 33rpx;
			}
		}

		.loginPage_flex_1_higd {
			padding: 0rpx 32rpx 0rpx 32rpx;
			width: 686rpx;
			height: 594rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 20rpx 1rpx rgba(64, 84, 205, 0.09);
			margin: 200rpx 0rpx 0rpx 32rpx;
			border-radius: 32rpx;
			position: relative;

			.loginPage_fd1_0_higd {
				margin: 130rpx 0rpx 0rpx 0rpx;
				padding: 40rpx 0rpx 40rpx 0rpx;
				border-bottom: 1px solid rgba(238, 238, 238, 1);

				.loginPage_fd1_0_c1_higd {
					color: var(--benbenFontColor0);
					font-size: 32rpx;
					font-weight: 400;
					line-height: 40rpx;
					margin: 0rpx 0rpx 0rpx 28rpx;
					height: 45rpx;
				}
			}

			.loginPage_fd1_1_higd {
				margin: 0rpx 0rpx 0rpx 0rpx;
				padding: 40rpx 0rpx 40rpx 0rpx;
				border-bottom: 1px solid rgba(238, 238, 238, 1);
			}

			.loginPage_fd1_2_higd {
				margin: 32rpx 0rpx 0rpx 0rpx;

				.loginPage_fd1_2_c0_higd {
					color: var(--benbenFontColor8);
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
				}
			}

			.loginPage_fd1_3_higd {
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				font-size: 32rpx;
				background: rgba(211, 42, 41, 1);
				color: var(--benbenFontColor3);
				width: 622rpx;
				height: 88rpx;
				line-height: 88rpx;
				margin: 100rpx 0rpx 0rpx 0rpx;
			}

			.loginPage_fd1_4_higd {
				margin: 34rpx 0rpx 0rpx 0rpx;

				.loginPage_fd1_4_c1_higd {
					width: 1rpx;
					height: 20rpx;
					background: rgba(153, 153, 153, 1);
					margin: 0rpx 20rpx 0rpx 20rpx;
					transform: scaleX(0.5);
				}
			}



			.loginPage_fd1_6_higd {
				width: 180rpx;
				height: 180rpx;
				border-radius: 0rpx;
				position: absolute;
				top: -90rpx;
				right: 50%;
				transform: translateX(50%);
			}
		}

		.loginPage_fd1_0_c0_higd {
			width: 34rpx;
			height: 34rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.loginPage_fd1_1_c1_icon1_higd {
			width: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 40rpx;
		}

		.loginPage_fd1_4_c0_higd {
			color: var(--benbenFontColor2);
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
		}

		.loginPage_fd1_5_c2_higd {
			color: rgba(65, 119, 221, 1);
			font-size: 28rpx;
			font-weight: 400;
			line-height: 33rpx;
		}

		.loginPage_flex_0_higd {
			padding: 140rpx 0rpx 0rpx 0rpx;
			justify-content: space-between;
			padding-right: 32rpx;
			color: #fff;

			.loginPage_fd0_0_higd {
				width: 160rpx;
				height: 160rpx;
				border-radius: 33rpx 33rpx 33rpx 33rpx;
			}

			.loginPage_fd0_1_higd {
				color: var(--benbenFontColor3);
				font-size: 60rpx;
				font-weight: 500;
				line-height: 84rpx;
				margin: 0rpx 0rpx 0rpx 32rpx;
			}

			.types {
				font-size: 36rpx;

				text {
					margin: 0 20rpx;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.loginPage_flex_0_higds {
		padding-top: 20rpx !important;
	}

	::v-deep .loginPage_fd1_1_c1_higd {
		height: 45rpx;
		font-size: 32rpx;
		margin: 0rpx 0rpx 0rpx 28rpx;
		line-height: 40rpx;
		font-weight: 400;
		color: var(--benbenFontColor0);
		width: 550rpx;
	}
</style>
